<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Insert title here</title>

<link href="../bootstrap/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
html {
	padding: 10px 20px 10px 20px;
}
</style>
</head>
<body>
	<form id="searchForm" action="${pageContext.request.contextPath }/post/search">
		<div class="form-row">
			<div class="form-group col-md-5" style="padding-left:0px;">
				<label for="title">文章标题</label> 
				<input type="text" class="form-control" id="title" name="title" value="${title }">
			</div>
				
			<div class="form-group col-md-3">
				<label for="category">文章分类</label> 
				<select id="category" class="form-control" name="category.id">
					<option value="-1" selected>请选中分类：</option>
					
					<c:forEach items="${categories }" var="c">
						<c:choose>
							<c:when test="${cid != null && cid == c.id }">
								<option value="${c.id }" selected>${c.name }</option>
							</c:when>
							<c:otherwise>
								<option value="${c.id }">${c.name }</option>
							</c:otherwise>
						
						</c:choose>
					</c:forEach>
				</select>
			</div>

			<div class="form-group col-md-3">
				<label for="created">创建时间</label> 
				<input type="text" class="form-control" id="created" name="created"
					value='<fmt:formatDate value="${created }" pattern="yyyy-MM-dd"/>'
					>
			</div>
			
			<div class="form-group col-md-1">
				<label>&nbsp;</label> 
				<button type="submit" id="btnSearch" class="form-control btn btn-primary">搜索</button>
			</div>
		</div>
		
		<div class="form-row" style="margin-bottom:10px;">
			<div class="btn-group btn-group-sm" role="group">
				<button type="button" class="btn btn-primary">添加文章</button>
				<button type="button" class="btn btn-primary" id="batchDelete">批量删除</button>
			</div>
		</div>
		
		<table class="table table-bordered table-striped table-hover"> 
			<thead>
				<tr>
					<th scope="col"></th>
					<th scope="col">#</th>
					<th scope="col">标题</th>
					<th scope="col">创建时间</th>
					<th scope="col">分类</th>
					<th scope="col">操作</th>
				</tr>
			</thead>
			<tbody>
			<c:forEach var="post" items="${posts}">	
				<tr>
					<td><input class="form-check-input" type="checkbox" name="ids" value="${post.id }"></td>
					<th scope="row">${post.id }</th>
					<td>${post.title }</td>
					<td><fmt:formatDate value="${post.created }" pattern="yyyy-MM-dd HH:mm:ss"/></td>
					<td>${post.category.name }</td>
					<td>
						<a href="${pageContext.request.contextPath}/post/edit_form?id=${post.id }"">修改</a>
						&nbsp;&nbsp;
						<a href="${pageContext.request.contextPath}/post/delete?id=${post.id }">删除</a>
					</td>
				</tr>
			</c:forEach>
			</tbody>
		</table>
		<nav aria-label="Page navigation">
		  <ul class="pagination">
			<li>
			  <a href="javascript:prevPage()" aria-label="Previous">
				<span aria-hidden="true">&laquo;</span>
			  </a>
			</li>
			
			<!-- 服务器需要告诉jsp一共多少页 -->
			<!-- 服务器需要告诉jsp当前是第几页 -->
			<c:forEach begin="1" end="${totalPage }" var="page">
				<c:choose>
					<c:when test="${page == currentPage}">
						<li class="active"><a href="${pageContext.request.contextPath }/post/findPage?page=${page}&size=10">${page }</a></li>
					</c:when>
					<c:otherwise>
						<li><a href="${pageContext.request.contextPath }/post/findPage?page=${page}&size=10">${page }</a></li>
					</c:otherwise>
				</c:choose>
			</c:forEach>

			<li>
			  <a href="javascript:nextPage()" aria-label="Next">
				<span aria-hidden="true">&raquo;</span>
			  </a>
			</li>
		  </ul>
		</nav>
	</form>

	<script src="../js/jquery.min.js"></script>
	<script src="../bootstrap/bootstrap.min.js"></script>
	
	<script type="text/javascript">
		$(function() {
			$('#searchForm').submit(function() {
				// 如果下拉框选中的是第一个，就把下拉框的提交值清除
				var cid = $('#category').val();
				
				if (cid == -1) {
					$('#category').val(null);
				}
			});
			
			$('#batchDelete').click(function() {
				var ids = [];
				// 获取选中的id
				$('input:checkbox:checked').parent().next().each(function(idx, element) {
					// element是个dom元素，$(element)变成一个jquery对象，
					// console.log($(element).text());
					ids.push($(element).text());
				});
				
				var obj = {"ids": ids};
				// 发送ajax请求
// 				$.ajax({
// 					url: '${pageContext.request.contextPath}/post/deleteBatch',
// 					data: $.param(obj, true),
// 					success: function(result) {
// 						// 请求成功后，刷新当前页面
// 						window.location.reload();
// 					}
// 				});
				
				window.location = "${pageContext.request.contextPath}/post/deleteBatch?" + $.param(obj, true);
			});
		});
		
		function prevPage() {
			var currentPage = ${currentPage};
			if (currentPage > 1) {
				var url = "${pageContext.request.contextPath }/post/findPage?page=" + (currentPage - 1) + "&size=10";
				window.location = url;
			}
		}
		
		function nextPage() {
			var currentPage = ${currentPage};
			if (currentPage < ${totalPage }) {
				var url = "${pageContext.request.contextPath }/post/findPage?page=" + (currentPage + 1) + "&size=10";
				window.location = url;
			}
		}
	</script>
</body>
</html>